<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.fade-enter,
			.fade-leave-to {
				opacity: 0
			}

			.fade-enter-active,
			.fade-leave-active {
				transition: opacity .5s
			}
		</style>
	</head>
	<body>

		<div id="app">
			<button @click=" toggleCom">切换</button>
			<transition name="fade">
				<keep-alive>
					<div :is="currentView"></div>
				</keep-alive>
			</transition>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.component('Aa', {
				template: '<h3> AAAAAA </h3>'
			})
			Vue.component('Bb', {
				template: '<h3> BBBBBB </h3>'
			})
			new Vue({
				el: '#app',
				data: {
					currentView: 'Aa'
				},
				methods: {
					toggleCom() {
						if (this.currentView === 'Aa') {
							this.currentView = 'Bb'
						} else {
							this.currentView = 'Aa'
						}
					}
				}
			})
		</script>

	</body>
</html>
